<!--
* @description 选择屏蔽设备
* @author zywu
* @date 2021/04/25 11:53:50
!-->
<template>
  <div class="shield-device d-flex">
    <!-- 已选择 -->
    <div style="width:300px;">
      <div>
        已选择
        <span class="shield-device__count">{{selectedList.length}}</span>个
      </div>
      <el-input
        v-model.trim="name"
        placeholder="请输入设备名称"
        clearable
        @keyup.native.enter="filterSelected"
        @clear="filterSelected"
      ></el-input>
      <el-button v-if="selectedListShow.length>0" type="text" @click="handleMultiDel">全部移除</el-button>
      <div style="max-height:610px;overflow:auto;">
        <div
          class="shield-device__item is-selected d-flex ai-center jc-between"
          v-for="item in selectedListShow"
          :key="item.structureId"
        >
          <div>
            <div class="shield-device__name">{{item.structureName}}</div>
            <div class="shield-device__type">{{item.fcFacilitiesName}}</div>
          </div>
          <i class="el-icon el-icon-close" @click="handleDel(item)"></i>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="shield-device__transfer d-flex flex-column ai-center" style="width:56px;">
      <el-button
        v-show="dataList.length>0"
        icon="el-icon-d-arrow-left"
        type="primary"
        plain
        :disabled="dataListSelection.length==0"
        @click="handleTransfer"
        style="margin-top:101px;"
      ></el-button>
    </div>
    <!-- 待选择 -->
    <div v-loading="loading" style="padding-top:21px;flex:1;">
      <el-form inline :model="dataForm" ref="dataForm">
        <el-form-item prop="fbsId">
          <tree-select
            v-model="dataForm.fbsId"
            filterable
            placeholder="建筑物"
            :data="buildList"
            :defaultProps="buildDefaultProps"
            :checkedKeys="defaultCheckedFbsId"
            :nodeKey="buildNodeKey"
            @node-click="onNodeClick"
          ></tree-select>
        </el-form-item>
        <el-form-item prop="categoryId">
          <tree-select
            v-model="dataForm.categoryId"
            placeholder="设备类别"
            filterable
            :width="200"
            :data="typeList"
            :defaultProps="typeDefaultProps"
            :checkedKeys="defaultCheckedCategoryId"
            :nodeKey="typeNodeKey"
            @node-click="onTypeNodeClick"
          ></tree-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="dataForm.name" placeholder="请输入设备名称" @keyup.enter.native="getList(1)"></el-input>
        </el-form-item>
      </el-form>
      <div v-show="dataList.length>0" style="padding:10px 0 0 11px;">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </div>
      <div class="shield-device__list">
        <div
          class="shield-device__item d-flex ai-center jc-between"
          :class="{ 'is-selected':item.selected }"
          v-for="item in dataList"
          :key="item.structureId"
        >
          <el-checkbox v-model="item.checked" @change="onChecked"></el-checkbox>
          <div class="shield-device__content">
            <div class="shield-device__name">{{item.structureName}}</div>
            <div class="shield-device__address">{{item.levelLocation}}</div>
          </div>
          <el-tag type="danger" effect="plain">{{item.fcFacilitiesName}}</el-tag>
        </div>
      </div>
      <div v-show="dataList.length==0" class="text-center" style="padding:50px 0;color:#999;">暂无数据</div>
      <el-pagination
        v-show="dataList.length>0"
        background
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="pageIndex"
        :page-sizes="[ 10, 20,50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align:right;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getNoShieldLists } from '@/api/sysConfig'
import { getSysFcfCategoryTree } from '@/api/fcf'
import { getFbsTree } from '@/api/fbs'
import TreeSelect from '@/libs/TreeSelect/Main'
import { mapGetters } from 'vuex'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    orgId: {
      type: [Number, String],
      default: '',
    },
    buildId: {
      type: [Number, String],
      default: '',
    },
    defaultSelected: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      name: '',
      selectedList: [],
      selectedListShow: [],
      // 消防系统-资产类别
      typeList: [],
      typeDefaultProps: {
        children: 'fireCtlFacsCategoryList',
        label: 'name',
        value: 'id',
      },
      typeNodeKey: 'id',
      defaultCheckedCategoryId: [],
      // 建筑物
      buildList: [],
      buildDefaultProps: {
        children: 'nodes',
        label: 'text',
        value: 'id',
      },
      buildNodeKey: 'id',
      defaultCheckedFbsId: [],
      dataForm: {
        name: '',
        categoryId: '',
        fbsId: '',
      },
      dataList: [],
      dataListSelection: [],
      loading: false,
      total: 0,
      pageSize: 10,
      pageIndex: 1,
      checkAll: false,
      isIndeterminate: false,
      systemId: '',
      categoryId: '',
    }
  },

  components: { TreeSelect },

  computed: {
    ...mapGetters(['userOrgIds']),
  },

  watch: {
    visible(val) {
      if (val) {
        this.dataList = []
        this.init()
      }
    },
  },

  created() {
    this.getTypeList()
    this.getBuildTree()
    this.init()
  },

  mounted() {},

  methods: {
    handleMultiDel() {
      this.selectedList.forEach((n) => {
        let item = this.dataList.filter((m) => {
          return n.structureId == m.structureId
        })[0]
        if (item) item.selected = false
      })
      this.selectedList = []
      this.selectedListShow = []
    },
    init() {
      this.checkAll = false
      this.isIndeterminate = false
      this.selectedList = JSON.parse(JSON.stringify(this.defaultSelected))
      this.filterSelected()
      this.dataListSelection = []
      this.dataForm.fbsId = this.buildId
      this.getBuildTree()
      this.getList(1)
    },
    getBuildTree() {
      getFbsTree({
        organizationId: this.orgId,
        buildId: this.buildId || 0,
      }).then((res) => {
        this.buildList = res.data.length === 0 ? [] : res.data

        this.$nextTick(() => {
          this.defaultCheckedFbsId = this.buildId
            ? this.buildId.toString().split(',')
            : []
          this.dataForm.fbsId = this.buildId || ''
        })
      })
    },
    handleDel(item) {
      let index = ''
      for (let i = 0; i < this.selectedList.length; i++) {
        if (item.structureId == this.selectedList[i].structureId) {
          index = i
          break
        }
      }
      if (index !== '') this.selectedList.splice(index, 1)
      this.filterSelected()
      this.dataList.forEach((n) => {
        if (n.structureId == item.structureId) {
          n.selected = false
        }
      })
    },
    onNodeClick() {
      this.$nextTick(() => {
        this.getList(1)
      })
    },
    onTypeNodeClick(obj, node) {
      if (obj.hasOwnProperty('parentId')) {
        // 设备类别
        this.systemId = node.parent.data.id || ''
        this.categoryId = obj.id
      } else {
        // 消防系统
        this.systemId = obj.id
        this.categoryId = ''
      }
      this.$nextTick(() => {
        this.getList(1)
      })
    },
    onChecked() {
      this.dataListSelection = JSON.parse(
        JSON.stringify(
          this.dataList.filter((n) => {
            return n.checked
          })
        )
      )
      let checkedCount = this.dataListSelection.length
      this.checkAll = checkedCount === this.dataList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dataList.length
    },
    handleCheckAllChange(val) {
      this.dataList.forEach((n) => {
        n.checked = val
      })
      this.dataListSelection = val ? this.dataList : []
      this.isIndeterminate = false
    },
    handleTransfer() {
      this.dataListSelection.forEach((n) => {
        if (
          this.selectedList.filter((m) => {
            return n.structureId == m.structureId
          }).length == 0
        ) {
          this.selectedList.push(n)
        }
      })
      this.dataList.forEach((n) => {
        n.selected =
          this.selectedList.filter((m) => {
            return n.structureId == m.structureId
          }).length > 0
        n.checked = false
      })
      this.filterSelected()
      this.dataListSelection = []
      this.checkAll = false
      this.isIndeterminate = false
    },
    sizeChange(_pageSize) {
      //页码切换
      this.getList(1, _pageSize)
      this.checkAll = false
      this.isIndeterminate = false
    },
    pageChange(_pageIndex) {
      //翻页
      this.getList(_pageIndex)
      this.checkAll = false
      this.isIndeterminate = false
    },
    getList(_pageIndex, _pageSize) {
      //获取列表
      if (_pageIndex) {
        this.pageIndex = _pageIndex
      }
      if (_pageSize) {
        this.pageSize = _pageSize
      }
      this.dataListSelection = []
      this.loading = true
      let parames = {
        orgId: this.orgId,
        queryType: 1,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
        locationId: this.dataForm.fbsId || this.buildId || '',
        structureName: this.dataForm.name,
        fcFacilitiesId: this.categoryId || '',
        systemId: this.systemId,
      }
      getNoShieldLists(parames).then((res) => {
        this.dataList = res.data.map((n) => {
          n.checked = false
          n.selected =
            this.selectedList.filter((m) => {
              return m.structureId == n.structureId
            }).length > 0
          return n
        })
        this.checkAll = false
        this.isIndeterminate = false
        this.dataListSelection = []
        this.total = res.total
        this.loading = false
      })
    },
    handleNodeClick() {},
    filterSelected() {
      this.selectedListShow = this.selectedList.filter((n) => {
        return n.structureName.indexOf(this.name) > -1
      })
    },
    // 获取消防系统与设备类别
    getTypeList() {
      getSysFcfCategoryTree({
        orgIds: this.$store.state.userinfo.organizationIds,
      }).then((res) => {
        // 加上全部
        res.data.unshift({
          id: '',
          name: '全部物联设备类别',
        })
        this.typeList = res.data
        // 默认选择全部
        this.$nextTick(() => {
          this.defaultCheckedCategoryId = ['-1']
        })
      })
    },
  },
}
</script>
<style lang='scss'>
.shield-device {
  &__list {
    margin-top: 10px;
    max-height: 610px;
    overflow-y: auto;
  }
  &__count {
    color: red;
  }
  &__item {
    margin: 0 0 10px;
    padding: 5px 0 5px 10px;
    border: 1px solid #dcdfe6;
    &.is-selected {
      border-color: #b3d8ff;
      background: #ecf5ff;
    }
    .el-icon-close {
      margin: 0 5px;
      color: red;
      width: 26px;
      height: 26px;
      cursor: pointer;
      text-align: center;
      line-height: 26px;
    }
    .el-tag {
      margin: 0 10px;
    }
    .el-checkbox {
      margin-right: 10px;
    }
  }
  &__content {
    flex: 1;
  }
  &__name {
    color: #333;
  }
  &__type,
  &__address {
    font-size: 12px;
    color: #999;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  &__transfer {
    margin: 0 10px;
    position: relative;
    .el-button {
      height: 40px;
    }
  }
}
</style>